<script setup lang="ts">
  import { ref } from "vue";
  import { ElButton, ElLoading, ElMessageBox } from "element-plus";
  import { clo, formatUrl, strParse } from "@/util";
  import Upload from "@/components/Upload.vue";
  import Rich from "@/components/Rich";
  const
    banner = ref<gt.components.Banner[]>([]),
    def = ref<gt.components.Banner[]>([]),
    indexDes = ref({ v: "", s: "" }),
    indexDesEl = ref<InstanceType<typeof Rich>>()
    ;
  async function init() {
    const d: gt.components.Banner[] = strParse(await getSetting("banner"), []);
    d.forEach(ee => { ee.url = formatUrl(ee.url, apiUrl); });
    if (d.length) {
      banner.value = clo(d);
    }
    def.value = d;
    indexDes.value.v = indexDes.value.s = await getSetting("indexDes");
    // indexDes.value.v = indexDes.value.s = t;
  }
  init();
  async function refreshClick() {
    const loading = ElLoading.service({ text: "正在还原，请稍后..." });
    banner.value = clo(def.value);
    loading.close();
    msg("还原完毕", "success");
  }
  async function save() {
    const loading = ElLoading.service({ text: "正在保存，请稍后..." });
    for (let i = 0; i < banner.value.length; i++) {
      if (banner.value[i].upload instanceof Function) {
        await banner.value[i].upload();
      }
    }
    const r = await gd.setting.update({ id: "banner", value: banner.value });
    loading.close();
    r ? msg("保存完毕", "success") : msg("保存失败", "error");
  }
  async function edit(p: gt.components.Upload) {
    ElMessageBox({
      title: "添加跳转链接",
      message: "请输入APP要跳转的链接",
      inputValue: p.link,
      inputPlaceholder: "请输入要跳转的链接",
      inputPattern: /^.{5,255}$/,
      inputErrorMessage: "长度限制为5-255",
      showInput: true,
      callback() { },
      async beforeClose(action, instance, done) {
        if (action == "confirm") {
          p.link = instance.inputValue;
        }
        done();
      },
    });

  }
  async function view(p: gt.components.Upload) {
    ElMessageBox({
      title: "查看跳转链接",
      message: "请输入APP要跳转的链接",
      inputValue: p.link,
      inputPlaceholder: "请输入要跳转的链接",
      inputPattern: /^.{5,255}$/,
      inputErrorMessage: "长度限制为5-255",
      showInput: true,
      callback() { },
      async beforeClose(action, instance, done) {
        if (action == "confirm") {
          p.link = instance.inputValue;
        }
        done();
      },
    });
  }

  function refreshIndexDes() {
    indexDes.value.v = indexDes.value.s;
  }
  async function saveIndexDes() {
    if (indexDesEl.value) {
      const loading = ElLoading.service({ text: "正在保存，请稍后..." });
      indexDes.value.s = indexDes.value.v = await indexDesEl.value.upload(async (base64) => {
        return await api.upload("img.jpg", base64, {}, "indexDes");
      });
      indexDes.value.s = indexDes.value.v;
      const r = await gd.setting.update({ id: "indexDes", value: indexDes.value.v });
      loading.close();
      r ? msg("保存完毕", "success") : msg("保存失败", "error");
    }
  }
</script>
<template>
  <div class="banner whf fg1 oy">
    <div class="label">横幅</div>
    <Upload class="pr" :list="banner" @edit="edit" @view="view" />

    <div>
      <ElButton type="success" @click="refreshClick">重置横幅</ElButton>
      <ElButton type="primary" @click="save">保存横幅</ElButton>
    </div>
    <div class="label">首页底部内容</div>
    <Rich v-model="indexDes.v" ref="indexDesEl" style="height: 20em;" />
    <div>
      <ElButton type="success" @click="refreshIndexDes">重置首页内容</ElButton>
      <ElButton type="primary" @click="saveIndexDes">保存首页内容</ElButton>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .banner {
    position: relative;
    .label {
      font-size: 1.4em;
      font-weight: 600;
      &::after {
        content: "\e68a";
        color: #666;
      }
      margin: 1em 0;
    }
    .pr {
      position: relative;
    }
  }
</style>